<template>
  <view class="content">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
      <template #top>
        <view class="navbarborder"></view>
      </template>
      <view class="main">
        <view class="head">
          <view class="img">
            <image src="../../static/index/yongjin/zhifubao.png" mode=""></image>
          </view>
        </view>
        <view class="money">
          ¥5000.00
        </view>
        <view class="view">
          <view class="left">
            提现类型
          </view>
          <view class="right">
            支付宝（12345@qq.com）
          </view>
        </view>
        <view class="view">
          <view class="left">
            当前状态
          </view>
          <view class="right">
            处理中
          </view>
        </view>
        <view class="view">
          <view class="left">
            申请时间
          </view>
          <view class="right">
            2023年3月5日20：23：21
          </view>
        </view>
        <view class="view">
          <view class="left">
            订单编号
          </view>
          <view class="right">
            20220020209202920920
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
 const dataList = ref([])
 const form = reactive({
   pageNo: 1,
   pageSize: 10,
   username: ''
 })
 const paging = ref(null)
 const queryList = (pageNo, pageSize) => {
   form.pageNo = pageNo
   // 此处请求仅为演示，请替换为自己项目中的请求
   // getUserList(form).then(res => {
   // if (res.code == 0) {
   dataList.value = dataList.value.concat([])
   // total.value = res.result.total
   paging.value.complete([]);
   // }
   // })
 }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .navbarborder{
      height: 0;
      border-top: 2rpx solid #EEEEEE;
    }
    .main{
      width: 100%;
      height: 100%;
      background-color: #fff;
      padding-bottom: 50rpx;
      .head{
        height: 180rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .img{
          width: 100rpx;
          height: 100rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
      }
      .money{
        // height: 100rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-weight: 700;
      }
      .view{
        width: 100%;
        padding: 10rpx 25rpx;
        display: flex;
        .left{
          width: 300rpx;
          height: 50rpx;
          line-height: 50rpx;
          // border: 1rpx solid red;
        }
        .right{
          width: 400rpx;
          height: 50rpx;
          line-height: 50rpx;
          // border: 1rpx solid red;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
</style>